<template>
	<a-form :ref="'ruleForm'" :model="localConfig" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
		<a-row :gutter="[10, 10]">
			<a-col :span="24">
				<a-form-item label="省份选择" class="form-item">
					<a-select
						style="width: 100%"
						placeholder="请选择省份"
						:value="localConfig.weatherConfig?.selectedProvince"
						@change="handleProvinceChange"
					>
						<a-select-option v-for="province in provinceOptions" :key="province.省" :value="province.省">
							{{ province.省 }}
						</a-select-option>
					</a-select>
				</a-form-item>
			</a-col>
			<a-col :span="24">
				<a-form-item label="城市选择" class="form-item">
					<a-select
						style="width: 100%"
						placeholder="请选择城市"
						:value="localConfig.weatherConfig?.selectedCity"
						@change="handleCityChange"
						:disabled="!localConfig.weatherConfig?.selectedProvince"
					>
						<a-select-option v-for="city in cityOptions" :key="city.市名" :value="city.市名">
							{{ city.市名 }}
						</a-select-option>
					</a-select>
				</a-form-item>
			</a-col>
			<a-col :span="24">
				<a-form-item label="自动刷新" class="form-item">
					<a-switch
						:checked="localConfig.weatherConfig?.autoRefresh"
						@change="(val) => (localConfig.weatherConfig.autoRefresh = val)"
					/>
				</a-form-item>
			</a-col>
			<a-col :span="24">
				<a-form-item label="刷新间隔(秒)" class="form-item" v-if="localConfig.weatherConfig.autoRefresh">
					<a-input-number
						:value="localConfig.weatherConfig?.refreshInterval"
						@change="(val) => (localConfig.weatherConfig.refreshInterval = val)"
						:min="60"
						:max="86400"
						style="width: 100%"
					/>
				</a-form-item>
			</a-col>
			<!--			<a-col :span="24">-->
			<!--				<a-form-item label="显示选择器" class="form-item">-->
			<!--					<a-switch-->
			<!--						:checked="localConfig.weatherConfig?.showSelector"-->
			<!--						@change="(val) => (localConfig.weatherConfig.showSelector = val)"-->
			<!--					/>-->
			<!--				</a-form-item>-->
			<!--			</a-col>-->
			<!--			<a-col :span="24">-->
			<!--				<a-form-item label="显示刷新按钮" class="form-item">-->
			<!--					<a-switch-->
			<!--						:checked="localConfig.weatherConfig?.showRefreshButton"-->
			<!--						@change="(val) => (localConfig.weatherConfig.showRefreshButton = val)"-->
			<!--					/>-->
			<!--				</a-form-item>-->
			<!--			</a-col>-->
			<a-col :span="24" class="mt-4">
				<div class="flex justify-end">
					<a-button class="mr-2" @click="resetConfig">重置</a-button>
					<a-button type="primary" @click="saveConfig">确认</a-button>
				</div>
			</a-col>
		</a-row>
	</a-form>
</template>

<script setup>
	import { defineEmits, defineProps, onMounted, reactive, ref, watch } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import config from '../config'
	import cityData from '../data.json'

	console.log(config.dataParams)
	const emits = defineEmits(['upDataConfig'])
	const props = defineProps({
		config: {
			type: Object,
			default: () => {
				return { ...config }
			}
		}
	})

	// 创建本地配置缓存，用于存储用户修改但尚未确认的配置
	const localConfig = reactive({ ...config, ...cloneDeep(props.config) })

	// 省市数据
	const provinceOptions = ref([])
	const cityOptions = ref([])

	// 初始化省市数据
	onMounted(() => {
		initProvinceOptions()
	})

	// 初始化省市数据
	const initProvinceOptions = () => {
		// 从cityData中提取省市数据
		if (cityData && cityData['城市代码']) {
			provinceOptions.value = cityData['城市代码']

			// 如果已有选中的省份，加载对应的城市列表
			if (localConfig.weatherConfig?.selectedProvince) {
				const province = provinceOptions.value.find((p) => p.省 === localConfig.weatherConfig.selectedProvince)
				if (province) {
					cityOptions.value = province.市
				}
			}
		}
	}

	// 处理省份选择变化
	const handleProvinceChange = (value) => {
		// 更新选中的省份
		localConfig.weatherConfig.selectedProvince = value

		// 更新城市列表
		const province = provinceOptions.value.find((p) => p.省 === value)
		if (province) {
			cityOptions.value = province.市
			// 重置城市选择
			localConfig.weatherConfig.selectedCity = ''
		}
	}

	// 处理城市选择变化
	const handleCityChange = (value) => {
		// 更新选中的城市
		localConfig.weatherConfig.selectedCity = value

		// 查找对应的城市编码
		const city = cityOptions.value.find((c) => c.市名 === value)
		if (city) {
			// 更新城市编码
			localConfig.dataParams.cityCode.value = city.编码
			localConfig.dataParams.area.value = `${localConfig.weatherConfig.selectedProvince} ${city.市名}`
		}
	}

	// 保存配置
	const saveConfig = async () => {
		// 更新配置
		emits('upDataConfig', cloneDeep(localConfig))
	}

	// 重置配置
	const resetConfig = () => {
		Object.assign(localConfig, cloneDeep(props.config))

		// 如果已有选中的省份，加载对应的城市列表
		if (localConfig.weatherConfig?.selectedProvince) {
			const province = provinceOptions.value.find((p) => p.省 === localConfig.weatherConfig.selectedProvince)
			if (province) {
				cityOptions.value = province.市
			}
		}
	}

	// 监听props.config的变化，更新本地配置
	watch(
		() => props.config,
		(newConfig) => {
			if (newConfig) {
				Object.assign(localConfig, cloneDeep(newConfig))

				// 如果已有选中的省份，加载对应的城市列表
				if (localConfig.weatherConfig?.selectedProvince) {
					const province = provinceOptions.value.find((p) => p.省 === localConfig.weatherConfig.selectedProvince)
					if (province) {
						cityOptions.value = province.市
					}
				}
			}
		},
		{ deep: true }
	)
</script>
<style scoped>
	:deep(.form-item) {
		margin-bottom: 0px;
	}

	.mt-4 {
		margin-top: 16px;
	}

	.mr-2 {
		margin-right: 8px;
	}

	.flex {
		display: flex;
	}

	.justify-end {
		justify-content: flex-end;
	}
</style>
